<!-- 总站大屏信息 -->
<template>
	<div class="chart-scrollbar layout-padding" ref="fullscreenElement">
		<!-- 页面头部 -->
		<pageHeader
			:showWeather="true"
			:isFullscreen="isFullscreen"
			@toggleFullScreen="toggleFullScreen"
			:headerTitle="$t('message.mainStationScreenNews.pageTitle')"
		/>

		<!-- 主体内容区域 -->
		<div style="display: flex; height: calc(100vh - 5.5rem)">
			<!-- 左侧内容区 -->
			<div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem">
				<div><stationInfo :stationInfoData="stationInfoData" /></div>
				<div><dayDispatchHours :daySendHours="daySendHours" /></div>
				<div><powerElectMatchMatch /></div>
			</div>

			<!-- 中间间隔 -->
			<div style="width: 0.8rem"></div>

			<!-- 右侧地图区 -->
			<div class="chart-map"><centerMap /></div>
		</div>
	</div>
</template>

<script setup lang="ts" name="mainStationScreenNews">
import { onMounted, ref, onUnmounted, defineAsyncComponent } from 'vue';

// 异步加载组件
const centerMap = defineAsyncComponent(() => import('./components/centerMap.vue'));
const stationInfo = defineAsyncComponent(() => import('./components/stationInfo.vue'));
const pageHeader = defineAsyncComponent(() => import('../../components/pageHeader/index.vue'));
const dayDispatchHours = defineAsyncComponent(() => import('./components/dayDispatchHours.vue'));
const powerElectMatchMatch = defineAsyncComponent(() => import('./components/powerElectMatchMatch.vue'));

// 全屏功能相关
const fullscreenElement = ref<HTMLElement | null>(null);
const isFullscreen = ref(false);

// 切换全屏
const toggleFullScreen = async () => {
	if (!fullscreenElement.value) return;

	try {
		if (!document.fullscreenElement) {
			await fullscreenElement.value.requestFullscreen();
		} else {
			await document.exitFullscreen();
		}
		isFullscreen.value = !isFullscreen.value;
	} catch (err) {
		console.error('全屏切换错误:', err);
	}
};

// 处理全屏状态变化
const fullscreenChangeHandler = () => {
	isFullscreen.value = !!document.fullscreenElement;
};

const daySendHours: any[] = [
	{
		id: 1,
		name: '苏州天佑',
		value: 3.51,
	},
	{
		id: 2,
		name: '太仓利洁时',
		value: 2.69,
	},
	{
		id: 3,
		name: '无锡液空',
		value: 2.51,
	},
	{
		id: 4,
		name: '佳木斯粮油',
		value: 1.69,
	},
	{
		id: 5,
		name: '齐齐哈尔飞鹤乳业',
		value: 1.51,
	},
	{
		id: 6,
		name: '上海天宝',
		value: 1.1,
	},
	{
		id: 7,
		name: '齐齐哈尔飞鹤乳业',
		value: 0.51,
	},
	{
		id: 8,
		name: '上海天宝',
		value: 0.1,
	},
];

const stationInfoData: any[] = [
	{ title: '电站总数', value: 333, unit: '个', icon: '🏭' },
	{ title: '电站容量', value: 231, unit: 'MWP', icon: '⚙️' },
	{ title: '总发电量', value: 231, unit: 'MWh', icon: '💡' },
	{ title: '日发电量', value: 231, unit: 'MWh', icon: '🌞' },
	{ title: '日发小时', value: 231, unit: 'h', icon: '🕒' },
	{ title: '实时功率', value: 231, unit: 'MW', icon: '📈' },
	{ title: '日CO2减排', value: 231, unit: '吨', icon: '🌿' },
	{ title: '总CO2减排', value: 231, unit: '吨', icon: '🌍' },
];

// 组件挂载时设置
onMounted(() => {
	document.addEventListener('fullscreenchange', fullscreenChangeHandler);
	if (fullscreenElement.value) {
		fullscreenElement.value.setAttribute('aria-label', '主内容区');
	}
});

// 组件卸载时清理
onUnmounted(() => {
	document.removeEventListener('fullscreenchange', fullscreenChangeHandler);
});
</script>

<style scoped lang="scss">
.chart-scrollbar {
	color: #fff;
	margin: auto;
	background: url('../../assets/bgImage.png') center center / 100% 100% no-repeat;
}

.chart-map {
	flex: 2;
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
